<template>
    <van-swipe class="swipeShown" :autoplay="3000" lazy-render :width="100">
      <van-swipe-item style="display: flex;justify-content: center;align-items: center" v-for="image in imageUrl" :key="image.name">
        <img :src="image.url" alt="" style="width:80%"/>
      </van-swipe-item>
    </van-swipe>
</template>

<script setup lang="ts">

const imageUrl = [
  { name:1,url:  '../../../../../public/BannerImg/swipe1.png'},
  { name:2,url: '../../../../../public/BannerImg/swipe2.png'},
  { name:3,url:'../../../../../public/BannerImg/swipe3.png'},
  { name:4,url:'../../../../../public/BannerImg/swipe4.png'}
];
</script>

<style scoped>
.swipeShown{
  border: 1px solid rgb(252, 210, 210);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height:170px;
}
</style>